import ListComponent from "./components/list";
import ChartComponent from "./components/chart";
import { tabIndex, tabPower } from "./components/list/store";
import { channel_id, isResetMap, merchant_id } from "./components/chart/store";
import { isHasPower } from "@/assets/directives/tools";
export default defineComponent({
  setup() {
    tabPower[0] = isHasPower("channelApi.queryList");
    tabPower[1] = isHasPower("channelApi.querChannelFact");
    const _this = reactive<any>(getCurrentInstance());
    const onChange = (key: number) =>
      nextTick(() => _this.refs[`ref_${key}`]?.initPage?.());
    watch(
      () => sysZone.value,
      () => _this.refs[`ref_${tabIndex.value}`]?.initPage?.()
    );
    onActivated(() => _this.refs[`ref_${tabIndex.value}`]?.initPage?.());
    return () => (
      <>
        <div style="height: 40px">
          <a-tabs
            v-model:activeKey={tabIndex.value}
            size="small"
            onChange={(key) => {
              merchant_id.value = "";
              if (key === 1) {
                isResetMap.value = true;
                channel_id.value = "";
              }
              onChange(key);
            }}
          >
            {tabPower[0] ? <a-tab-pane key={0} tab={$t("channel6")} /> : null}
            {tabPower[1] ? <a-tab-pane key={1} tab={$t("channel7")} /> : null}
          </a-tabs>
        </div>
        {tabIndex.value === 0 && tabPower[0] ? (
          <ListComponent ref={`ref_${tabIndex.value}`} onChange={onChange} />
        ) : tabPower[1] ? (
          <ChartComponent ref={`ref_${tabIndex.value}`} />
        ) : null}
      </>
    );
  },
});
